<template>
  <div style="margin-top: 90px" v-if="!isPC"></div>

  <div style="width: 95%;display: flex;justify-content: center;align-items: center">
      <div class="myword">
        <span class="mmword" id="ttt">人</span>
      </div>

      <div class="myword">
        <span class="mmword" id="ttt">人</span>
      </div>

      <div class="myword">
        <span class="mmword" id="ttt">都</span>
      </div>
      <div class="myword">
        <span class="mmword" id="ttt">有</span>
      </div>
      <div class="myword">
        <span class="mmword" id="ttt">荣</span>
      </div>
      <div class="myword">
        <span class="mmword" id="ttt">幸</span>
      </div>
  </div>

<!--  暖心留言区-->
  <div style="position: absolute;margin-top: 30px;width: 95%;justify-content: center;align-items: center">
    <div class="msgcontain">
      <span style="font-family: albbmm;color: black;">
        我知道，我知道这个世界对你做了很多，让你无数次想放弃，无数次麻痹自己才能坚持。但是，你看啊，我还在这里，我不会说完全理解你的绝望，也不会说你要努力快乐，但是，这一刻我会给你温热手掌，融化你一秒也好。 我的一生啊，可以只为这一秒而活哦。
      </span>
    </div>

    <div class="msgcontain">
      <span style="font-family: albbmm;color: black;">
        如果转角遇到过去的自己，我要说声谢谢你，谢谢那时未负青春的拼搏和努力 如果转角遇到哭泣的自己，我会拥你入怀拭你泪滴，告诉你没有什么会过不去 总有些遗憾吗？总有些遗憾吧，将该放手的珍惜，该把握的轻弃 白驹过隙，物转星移 愿我不会后悔遇见你，即使我们最终没有在一起 要努力 为了明天更好的你
      </span>
    </div>

    <div class="msgcontain">
      <span style="font-family: albbmm;color: black;">
        如果有一天，我老了，我便希望我能一个人生活在小城的南边，一块田，一条狗，三五只鸡，闲时看看书，喝喝茶，抚抚琴。 “桃李春风一杯酒，江湖夜雨十年灯”
      </span>
    </div>
    <div class="msgcontain">
      <span style="font-family: albbmm;color: black;">
        我生于中国，我骄傲！ 我爱你！中国！ 我爱这片土地~爱这片土地上可爱的人们
      </span>
    </div>

    <div class="msgcontain">
      <span style="font-family: albbmm;color: black;">
        代码里的那些天空的乌云、生活里的沉重，独自在角落里的绝望，眷恋的温存，都是不敢再提起的曾经。这不只是你，是每一个挣扎在繁华都市孤独的奋斗者，是每一个平凡的我们。感谢命运，那个少年终于成为很优秀的人，可以勇敢的拥抱过去的自己，用他的代码向所有人伸出了温热的手掌呀！他总能让我们看到世界残留的美好！
      </span>
    </div>

    <div class="msgcontain">
      <span style="font-family: albbmm;color: black;">
        亲爱的小王
      </span>
      <br>
      <span style="font-family: albbmm;color: black;">
        我写信给你是想表达我的关心和爱意。我希望你知道，无论发生什么，你都不会孤单。你是如此坚强和勇敢，我对你无比钦佩。
        在生活中遇到困难时，请记得你并不孤单。我会一直在你身边，支持你度过难关。请相信自己，你有无限的潜力，可以克服任何困难。
        无论天南地北，我们永远是彼此的避风港。如果你需要倾诉，我会用耐心的倾听和温暖的话语陪伴你度过每一个难关。请牢记，你的快乐也是我的快乐。
        最后，无论何时何地，都请保重。请记得，你的笑容是世界上最美丽的风景之一。
      </span>
      <br>
      <span style="font-family: albbmm;color: black;">
        真诚的!
      </span>
      <br>
      <span style="font-family: albbmm;color: black;">
        小王
      </span>
    </div>

    <div class="msgcontain">
      <span style="font-family: albbmm;color: black;">
        人人都有不幸，人人都有荣幸！
      </span>
    </div>

    <div class="msgcontain">
      <span style="font-family: albbmm;color: black;">
        当生活变得艰难时，不要忘记你并非孤独一人。你的坚韧和勇气将引领你走出困境。每一天都是新的开始，你值得拥有幸福和成功。无论发生什么，你都是独一无二的，值得被爱和珍惜。
      </span>
    </div>

    <div class="msgcontain">
      <span style="font-family: albbmm;color: black;">
        在茫茫人海中，你是一朵绽放的花朵，是星空中闪耀的繁星。生活的风雨无法掀起你内心的宁静，岁月的流逝也无法褪去你的芬芳。让心灵漫步在诗意的土地上，让希望的音符奏响生命的乐章，愿你如同清晨第一缕阳光般，温暖自己，温暖世界。
      </span>
    </div>

    <div class="msgcontain">
      <span style="font-family: albbmm;color: black;">
        嘿！人生如诗，有时疯狂，有时优雅。别忘了偶尔放肆一下，因为挑战使我们成长。在这个世界上找到自己的节奏，跳起你内心旋律的舞蹈。不要让生活把你变得太认真，因为笑一个，世界会更美好！
      </span>
    </div>

    <div class="msgcontain">
      <span style="font-family: albbmm;color: black;">
        人生犹如大海，时而宁静，时而澎湃。在时间的长河里，我们是微不足道的一粟，但内心却蕴藏着世界的宇宙。懂得感恩，学会宽容，体味人生百态，才能领略其中的哲理。活出真我，品味沧海桑田，方能在平凡中发现不凡。让善良成为底色，智慧点缀其间，与时间相伴，与世界对话，我们终将找到自己的意义，航向心灵的彼岸。
      </span>
    </div>

  </div>


</template>
<!---->
<script>
// import MarkDownEditor from 'vue-bl-markdown-editor'
// import 'vue-bl-markdown-editor/dist/css/main.css'

export default {
  name: "ContributeArea",
  components:{
    // MarkDownEditor
  },
  data(){
    return {
      text:'',
      isPC: true
    }
  },
  methods:{
    checkScreenWidth() {

      // 根据屏幕宽度判断是否为移动设备
      this.isPC = window.innerWidth <= 600; // 你可以根据实际需求设置阈值
      // 根据设备的屏幕大小修改字体的大小
      const elements = document.querySelectorAll('.mmword');
      const msgcontain = document.querySelectorAll('.msgcontain');

      if( this.$mhconfig.mechine === 'PC' ) {// 台式电脑
        elements.forEach( ele =>{
          ele.style.fontSize = '80px';
        })
        msgcontain.forEach( ele =>{
          ele.style.width = '195px';
        })
      }else if(this.$mhconfig.mechine === 'desktopPC'){//笔记本电脑
        elements.forEach( ele =>{
          ele.style.fontSize = '70px';
        })
        msgcontain.forEach( ele =>{
          ele.style.width = '250px';
        })
      }else if(this.$mhconfig.mechine === 'pad'){//平板电脑
        elements.forEach( ele =>{
          ele.style.fontSize = '60px';
        })
        msgcontain.forEach( ele =>{
          ele.style.width = '300px';
        })
      } else { // 移动设备
        elements.forEach( ele =>{
          ele.style.fontSize = '35px';
        })
        msgcontain.forEach( ele =>{
          ele.style.width = '320px';
        })

      }

    }
  },
  mounted() {
    // 在组件挂载后检查屏幕宽度
    this.checkScreenWidth();
    // 添加屏幕尺寸变化的事件监听器
    window.addEventListener('resize', this.checkScreenWidth);
  },
}
</script>

<style scoped>

.mmword{
  font-family: albbmm;
  color: #e15555;
  /*font-size: 80px;*/
}

.myword{
  width: 10%;
  height: 10%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
  border-bottom: 5px solid rgba(203, 201, 201, 0.85);
  box-shadow: #b1b3b8 0 0 5px;

}

.msgcontain{
  background-color: #ffcccc;
  width: 250px;
  padding: 10px;
  margin-right: 20px;
  /*border-radius: 5px;*/
  float: left;
  margin-bottom: 20px;
  /*box-shadow: #afaeae 0 0 5px;*/
  box-shadow:   5px 10px 5px #afaeae;
  border-left: 5px solid #9f157f;

}
</style>